<script setup lang="ts">
import { ref } from "vue";
import CommonAPI from "@/api/common";

const { waterForm, colspan = 1 } = defineProps<{
  waterForm: Object;
  colspan?: number;
}>();

let assignedDialogVisible = ref(false);
const selectedUsers = ref([]);
const addSampleForm = ref({
  device_name: [],
});

onMounted(() => {
  getDevicList();
});
// 打开分析仪器
const handleOpen = () => {
  assignedDialogVisible.value = true;
};

const handleClose = () => {
  assignedDialogVisible.value = false;
};

// 获取仪器接口
const getDevicList = () => {
  CommonAPI.getdevice().then((res) => {
    selectedUsers.value = res;
  });
};

const fetchSearchResults = (query) => {
  if (query === "") return;
  CommonAPI.getdevice({ device_name: query }).then((data) => {
    selectedUsers.value = data;
  });
};

// 添加表格
const handleSureSample = () => {
  const selectedDevices = selectedUsers.value.filter((device) =>
    addSampleForm.value.device_name.includes(device.id)
  );
  waterForm.device.tp_device_name = selectedDevices.map(
    (device) => device.device_name
  );
  waterForm.device.tp_device_model = selectedDevices.map(
    (device) => device.device_model
  );
  waterForm.device.tp_device_number = selectedDevices.map(
    (device) => device.device_number
  );
  console.log(selectedDevices, "selectedDevices");
  assignedDialogVisible.value = false;
};

const handleDelete = (index) => {
  waterForm.device.tp_device_name.splice(index, 1);
  waterForm.device.tp_device_model.splice(index, 1);
  waterForm.device.tp_device_number.splice(index, 1);
};
</script>

<template>
  <td colspan="13">
    <div style="display: flex; align-items: center">
      天平级别:
      <div
        style="width: 130px; min-height: 20px; margin-right: 10px"
        @click="handleOpen"
      >
        <div
          v-for="(item, index) in waterForm.device?.tp_device_name"
          :key="index"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <span>{{ item }}</span>
          <span style="cursor: pointer">
            <el-icon size="16" @click.stop="handleDelete(index)">
              <Coffee />
            </el-icon>
          </span>
        </div>
      </div>

      天平型号：
      <div style="width: 130px; min-height: 20px; margin-right: 10px">
        <div
          v-for="(item, index) in waterForm.device?.tp_device_model"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      天平编号：
      <div
        v-for="(item, index) in waterForm.device?.tp_device_number"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
  </td>

  <el-dialog
    v-model="assignedDialogVisible"
    title="添加仪器"
    width="30%"
    center
    :before-close="handleClose"
  >
    <el-form ref="form" :model="addSampleForm" label-width="90px">
      <el-form-item label="仪器名称：">
        <el-select
          v-model="addSampleForm.device_name"
          placeholder="请选择"
          filterable
          remote
          multiple
          :remote-method="fetchSearchResults"
        >
          <el-option
            v-for="(label, value) in selectedUsers"
            :key="value"
            :label="`${label.device_name} (${label.device_number})`"
            :value="label.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <span
        class="dialog-footer"
        style="display: flex; justify-content: center"
      >
        <el-button style="width: 50%" @click="handleClose">取 消</el-button>
        <el-button type="primary" style="width: 50%" @click="handleSureSample">
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}

.table td {
  width: 15%;
}

.table-td {
  display: flex;
  justify-content: center;
}
</style>
